<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>别踩白块</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <!-- 这里放黑白块 -->
    <div id="box">
        <img id="laba" src="">
        <div id="main">

        </div>
        
        <audio id="audio_music" src="./music/Y彭先生 - See You Again (抖音版) [mqms2].mp3.mp3"></audio>
        <audio id="audio_music2" src="./music/zd.mp3"></audio>
        <audio id="audio_music3" src="./music/彦岛主 - TECHNOS - FC游戏《双截龙2》第五关背景乐Remix (SteveYJH r.mp3.mp3"></audio>
        <audio id="audio_music4" src="./music/oooo.mp3"></audio>
        <audio id="audio_music5" src="./music/ready go.mp3"></audio>
        <div id="move_game">
            <img id="btn_move" src="./img/go.png">
        </div>

        <div id="again_game">
            <p class="currentp">当局评分：<a class="endresults"></a></p>
            <p class="btn_p"><button id="btn_again">再来一局!</button></p>
            <p><a id="showpaimin">总分排名</a></p>
            <p class="fenshu_user"><a>当前</a><span></span>玩家最好的的十次成绩：</p>
            <ul id="resultsul">
            </ul>
            <div id="paiming">
                <p class="exit"><span>X</span></p>
                <h4>游戏排行榜前三名</h4>
                <ul>
                    <li>玩家名称</li>
                    <li>分数</li>
                    <li><img src="./img/p3.png"><span class="pai1"></span></li>
                    <li></li>
                    <li><img src="./img/p6.png"><span class="pai2"></span></li>
                    <li></li>
                    <li><img src="./img/p5.png"><span class="pai3"></span></li>
                    <li></li>
                </ul>
            </div>
        </div>

    
        <div id="login">
            <p class="huanyin"></p>
            <h3>账号登入</h3>
            <br>
            <p><span>账号：</span><input type="text" class="ipt_user"></p>
            <p class="prompt"></p>
            <p><span>密码：</span><input type="password" class="ipt_pwd"></p>
            <p class="prompt"></p>
            <p><button class="ipt_login">登入</button></p>
            <p class="prompt"></p>
        </div>

        <img src="./img/jiazai2.gif" id="loadimg">
        <img id="laba" src="./img/labakai.png" data-laba='yes'>
    </div>


</body>
<script src="./js/dome1.js"></script>
<script src="./js/dome2.js"></script>
<script src="./js/login.js"></script>
<script src="./js/endshow.js"></script>
<script>
    //定时器s
    let timeTo;
    //用户获取ajax来得放数组
    let userArr = [];
    //用户名
    let userName = '';
    //判断结束器 
    let endcon = false;
    //成绩
    let results = 0;
    //播放歌曲
    let playmusic = true;
    //监控音乐
    let musiclist = [];
    let musiclist2 = [];
    let musiclist3 = [];
    //生成的颜色计数
    let blockofcolor = "black";
    let dangwei = 1;
    let myblock = new MyBlock();

    $(document).ready(function () {
        $("#again_game").css("display", "none");
        $("#move_game").css("display", "none");
        $("#login").css("display", "block");
        $("#login .ipt_user").focus();
    })
    //点击块装
    $("#main").on("click", function () {
        if ($(event.target).attr("data-key") == 'hei') {
            $(event.target).css("background-color", "darkgrey");
            $(event.target).attr("data-key", "yesok");
            if (playmusic == true) {
                musiclist.push('./music/zd.mp3');
                musicarr(musiclist);
            }
            results++;

        } else if ($(event.target).attr("data-key") == undefined && event.target.id != 'main') {
            //失败后的操作
            Gameover();
        }
    })
    //点击开始游戏就执行游戏代码
    $("#btn_again").click(function () {
        gameInit('1');
    })
    //再来一局
    $("#btn_move").click(function () {
        gameInit('2');
    })


    // 生成和删除
    function movegame() {
        // clearTimeout(timeTo);
        //移动每次移动多少位置
        tops = 5;
        speed = upgRade(results);
        timeTo = setTimeout(function () {
            if (endcon == true) {
                return;
            }
            let nub = $("#main ").css("top").replace("px", '');
            if (nub == 0) {
                $("#main ").css("top", -140 + 'px');
                $("#main ").prepend(myblock.rawBlock(results));
            }
            let nub2 = $("#main ").css("top").replace("px", '')
            $("#main ").css("top", Number(nub2) + tops + 'px');
            let n = 0;
            $("#main .div1").each((key, val) => {
                n++;
            })
            if (n == 7) {   
                $($("#main .div1")[6].children).each((key, val) => {
                    if ($(val).attr("data-key") == 'hei') {
                        //没点击到失败后的操作
                        Gameover();
                    }
                })
                $($("#main .div1")[6]).remove();
            }
            movegame();
        }, speed)
    }




    //游戏结束操作
    function Gameover() {
        if (playmusic == true) {
            musiclist3.push('./music/oooo.mp3');
            musicarr(musiclist3);
        }
        setTimeout(function () {
            if (playmusic == true) {
                document.getElementById('audio_music3').play();
            }
        }, 1000)
        $("#again_game").css("display", "block");
        $("#main").empty();
        endcon = true;
        clearTimeout(timeTo);
        $("#again_game .currentp .endresults").text(results + "分");
        $("#again_game .fenshu_user span").text(userName);
        //存入数据
        setdata(userName, results);
        //把当前分数玩家之前的分数给展示出来
        topThree(userName);
        //三个排行榜
        Threeshow();
    }

</script>

</html>